<template>
  <div class="form-control recipient-select">
    <el-tag v-for="label in modelValue.staff" :key="`staff_${label.id}`" closable type="info" size="medium"
            @close="handleClose(modelValue.staff,label)">
      {{ label.name }}
    </el-tag>
    <el-tag v-for="label in modelValue.parent" :key="`parent_${label.id}`" closable type="info" size="medium"
            @close="handleClose(modelValue.parent,label)">
      {{ label.name }}
    </el-tag>
    <div v-if="!emptySelection" style="color: #b2b2b2;padding-left: 10px;">{{ $t('loc.selectSender') }}</div>
  </div>
</template>

<script>

export default {
  name: "RecipientSelect",
  props: {
    modelValue: {
      type: Object,
      default: () => ({})
    },
    validateEvent: {
      type: Boolean,
      default: undefined
    }
  },
  computed: {
    emptySelection() {
      let {staff = [], parent = []} = this.value || {};
      return !staff.length && !parent.length;
    },
    _validateEvent() {
      return this.validateEvent || this.validateEvent === undefined;
    }
  },
  methods: {
    handleClose(labels, label) {
      labels.splice(labels.indexOf(label), 1);
      this.validate();
    },
    validate() {
      if (this._validateEvent) {
        console.log('validate', this.labels)
        // this.dispatch('ElFormItem', 'el.form.change', [this.labels])
      }
    }
  }
}
</script>

<style scoped lang="less">
.recipient-select {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  height: unset;
  border-radius: 4px;
  min-height: 40px;
}
.el-tag{
  color:#606266;
}
.form-control {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
}
</style>